<template>
  <div class="balance-content">
    <header>
      <h2 class="card-num">卡号：{{cardInfo.card_no}}</h2>
      <p class="balance" v-if="cardInfo.deposit">{{ (cardInfo.deposit / 100).toFixed(2) }}</p>
      <p class="balance" v-else>0.00</p>
      <p style="color: #fff;font-size: .367rem;text-align: center;margin-top: -0.3rem">当前余额</p>
    </header>

    <div class="weui-cells__title">储值充值</div>

    <div class="weui-cells" v-if="hasSelectData">

      <div class="weui-flex">
        <div class="weui-flex__item choose-item" v-for="item in dptCardList">
          <div class="active" v-if="item.disc_no == discNo" v-on:click="selected(item.disc_no, item.dpt_add_limit/100)">
            <div class="placeholder">
              <p style="font-size: .4rem">充值 {{item.dpt_add_limit / 100}} 元</p>
              <small style="font-size: .3rem">赠送 {{item.dpt_add_largess / 100}} 元</small>
            </div>
          </div>

          <div class="" v-else v-on:click="selected(item.disc_no, item.dpt_add_limit/100)">
            <div class="placeholder">
              <p style="font-size: .4rem">充值 {{item.dpt_add_limit / 100}} 元</p>
              <small style="font-size: .3rem">赠送 {{item.dpt_add_largess / 100}} 元</small>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="weui-cells" v-else>
      <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd" style="padding: .667rem;">
          <p style="text-align: center">该商户暂无优惠充值活动</p>
          <p style="text-align: center;margin-top: .27rem;">您可通过输入金额进行充值</p>
        </div>
      </div>
    </div>

    <div class="weui-cells">
      <div class="weui-cell" style="font-size: .373rem">
        <div class="weui-cell__hd"><label class="weui-label">充值金额(元)</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="tel" pattern="[0-9]*" placeholder="请输入需要充值的金额" v-model="iptNum"/>
        </div>
      </div>
    </div>

    <div class="button-sp-area" style="margin-top: 1.067rem">
      <a href="javascript:;" class="weui-btn weui-btn_primary store-btn" v-on:click="recharge">充值</a>
    </div>

    <div class="weui-cells__title" style="font-size: .32rem;margin-top: 1.08rem;">
      <p>储值说明</p>
      <ul style="margin-left: 1.08rem;">
        <li>储值不支持提现</li>
        <li>赠送部分不予开取发票</li>
        <li>仅限本店及相关指定连锁店消费</li>
        <li>在法律允许范围内，本店对卡的使用规定做适当调整</li>
      </ul>
    </div>


    <div id="dialog1" v-show="showAlert">
      <div class="weui-mask"></div>
      <div class="weui-dialog weui-skin_android">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title" style="font-size: 0.533333rem;color: #333">提示</strong>
        </div>
        <div class="weui-dialog__bd" style="font-size: 0.426667rem; color: #666">{{alertText}}</div>
        <div class="weui-dialog__ft">
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="color: #ff6600"
             v-on:click="hideAlert">我知道了</a>
        </div>
      </div>
    </div>

    <loading :show="showLoading" :text="showLoadingText"></loading>
    <toast v-model="showToast" width="5rem" :type="toastType" :time="800" :text="toastText"></toast>

  </div>
</template>
<script>

  import {Loading, Toast} from 'vux'

  import {utils} from './../common/utils/utils'
  import {oauth} from './../common/utils/oauth'
  import {wechat} from './../common/utils/wechat'

  const common = require('./../common/utils/common')

  export default {
    components: {
      Loading,
      Toast,
    },
    data() {
      return {
        mchCodeByUrl: common.getUrlParam('mchCode'),
        openidByUrl: common.getUrlParam('openid'),
        payOpenidByUrl: common.getUrlParam('payOpenid'),
        cacheMchCode: localStorage.getItem('mchCode'),
        cacheMchType: localStorage.getItem('type'),
        openid: localStorage.getItem('openid'),
        payOpenid: '',

        cardNo: '',
        cardInfo: '',
        dptCardList: [],
        addLimit: '',
        iptNum: '',
        posCode: '',

        isActive: true,
        discNo: '',
        hasSelectData: true,

        mbOrderNo: '',

        showMask: false,
        showLoading: false,
        showLoadingText: '',
        showToast: false,
        toastType: 'cancel',
        toastText: '',
        showAlert: false,
        alertText: '',
      }
    },
    beforeCreate() {
      document.title = '我的储值'
    },
    async created() {

      const _this = this

      this.showLoading = true

      this.cardNo = this.$route.params.cardNo

      //授权
      oauth.checkOauth(utils, _this)

      const payOpenidByUrl = common.getUrlParam('payOpenid')

      if(common.isEmptyString(localStorage.getItem('payOpenid'))) {

        if(common.isEmptyString(payOpenidByUrl)) {
          //获取支付openid
          const payOpenid = await utils.getPayOauth(_this)
          localStorage.setItem('payOpenid', payOpenid)
          this.payOpenid = payOpenidByUrl
        } else {
          localStorage.setItem('payOpenid', payOpenidByUrl)
          this.payOpenid = payOpenidByUrl
        }

      } else {
        this.payOpenid = localStorage.getItem('payOpenid')
      }

      const result = await utils.getBalanceInfo(_this)

      if (result['data']['code'] === 200) {

        _this.showLoading = false

        this.posCode = result['data']['values']['pos_code']

        this.cardInfo = result['data']['values']
        if (result['data']['values']['discount_list'].length === 0) {
          this.hasSelectData = false
        } else {
          this.dptCardList = result['data']['values']['discount_list']
        }
      } else {
        _this.showLoading = false
        this.showAlert = true
        this.alertText = result['data']['msg']
      }
      console.log(result)
    },
    methods: {
      selected: async function (discNo, addLimit) {

        const _this = this

        this.showLoading = true
        this.isActive = true
        this.discNo = discNo
        this.addLimit = addLimit

        const result = await utils.createRechargeDiscountOrder(_this)

        if(result) {
          if (result['data']['code'] === 200) {
            this.showLoading = false
            this.mbOrderNo = result['data']['values']['order_no']

            const res = await utils.getPay(_this)

            const webPayData = JSON.parse(res.data.web_pay_data)

            wechat.callPay(webPayData, _this)

          } else {
            _this.showLoading = false
            this.showAlert = true
            this.alertText = result['data']['msg']
          }
        }
      },

      recharge: async function () {
        this.showLoading = true
        const _this = this

        if(common.isEmptyString(this.iptNum)) {
          this.showLoading = false
          this.showAlert = true
          this.alertText = '请输入充值金额'
        } else {

          const result = await utils.createRechargeOrder(_this)

          if(result) {
            if (result['data']['code'] === 200) {
              this.showLoading = false
              this.mbOrderNo = result['data']['values']['order_no']
              this.addLimit = this.iptNum

              const res = await utils.getPay(_this)

              const webPayData = JSON.parse(res.data.web_pay_data)

              wechat.callPay(webPayData, _this)

            } else {
              this.showLoading = false
              this.showAlert = true
              this.alertText = result['data']['msg']
            }
          }
        }

      },

      hideAlert: function () {
        this.showAlert = false
      },

    }
  }
</script>
<style scoped>
  @import "~weui";

  .weui-cells {
    margin-top: 0;
  }

  .balance-contet {
    background-color: #f2f2f2;
    min-height: 17.787rem;
  }

  header {
    height: 2.4rem;
    background-color: #000;
    color: #fff;
    padding: .4rem;
  }

  .card-num {
    font-size: .427rem;
  }

  header .balance {
    font-size: 1.067rem;
    text-align: center;
    /*padding-top: .373rem;*/
  }

  .qrcode {
    padding-left: 1.067rem;
    font-size: .373rem;
  }

  .qrcode {
    background: url("./../assets/image/rmb.png") no-repeat 0 0;
  }

  .store-btn {
    /*background-color: #fff;*/
    /*color: #ff6600;*/
    /*border-color: #ff6600;*/
    width: 9.253rem;
    text-align: center;
    font-size: .427rem
  }

  .weui-flex__item {
    background: url("./../assets/image/bg-default.png") no-repeat 0 0;
    background-size: 100%;
  }

  .choose-item {
    padding: .20rem;
    margin: .4rem;
    height: 1.12rem;
    position: relative;
  }

  .active {
    background: url("./../assets/image/bg-active.png") no-repeat 0 0;
    background-size: 100%;
    height: 1.493333rem;
    position: absolute;
    width: 90%;
    left: 0;
    top: 0;
    padding: .2rem;
    /*padding: .2rem*/
  }

  ul li {
    line-height: 0.8rem;
  }
</style>
